<template>
    <div class="container">
      <div class="title">
        书法百科
      </div>
      <div class="idea_body" v-if="knowledgeList">
        <ideaCard v-for="(item, index) in knowledgeList" :key="index" :knowledgeList="item" :KnowledgeDetail="KnowledgeDetail" style="margin: 0 0 10px 0;"/>
      </div>
      <el-divider />
      <div class="pagination">
        <!-- <el-pagination background layout="prev, pager, next" :total="20" /> -->
        <el-pagination
          v-model:current-page="currentPage1"
          :page-size="8"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next"
          :total="80"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
</template>

<script>
import Message from '@/components/library/Message'
import { findKnowledge, findKnowledgeDetail } from '@/api/knowledge'
import ideaCard from './conponents/idea-card.vue'
import { onMounted, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'knowLedge',
  components: {
    ideaCard
  },
  setup () {
    const router = useRouter()
    function toLogin () {
      router.push({ path: '/login' })
    }
    const currentPage1 = ref(1)
    const store = useStore()
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
      // console.log(`current page: ${val}`)
      currentPage1.value = val
      getData(val)
      getKnowledgeDetail(val)
    }
    // 合并后的书法知识列表
    const knowledgeList = computed(() => {
      return store.state.knowLedge.knowledgeList
    })
    const current = computed(() => {
      return store.state.knowLedge.currentPage
    })
    // 列表
    function getData (cur) {
      findKnowledge().then(res => {
        // console.log(res.data[0].data[cur - 1].data)
        if (res.code === '999') {
          Message({ type: 'error', text: res.msg })
          toLogin()
        }
        if (cur) {
          currentPage1.value = cur
          store.commit('knowLedge/SETCURRENTPAGE', cur)
          store.commit('knowLedge/SETKNOWLEDGE', res.data[0].data[cur - 1].data)
        } else {
          currentPage1.value = 1
          store.commit('knowLedge/SETCURRENTPAGE', 1)
          store.commit('knowLedge/SETKNOWLEDGE', res.data[0].data[0].data)
        }
      }).catch(() => {

      })
    }
    // 知识详情
    function getKnowledgeDetail (val) {
      findKnowledgeDetail().then(res => {
        // console.log(res.data[0].data[0])
        // 1 0-7  2 8-15  3 16-23
        const arr = []
        let i = 0
        for (i = (val - 1) * 8; i < 8 * val; i++) {
          arr.push(res.data[0].data[i])
          // console.log(i)
        }
        store.commit('knowLedge/SETKNOWLEDGEDETAIL', arr)
      }).catch(() => {
      })
    }
    onMounted(() => {
      currentPage1.value = store.state.knowLedge.currentPage
      getData(currentPage1.value)
      getKnowledgeDetail(currentPage1.value)
    })
    return { currentPage1, handleSizeChange, handleCurrentChange, knowledgeList, current }
  }
}
</script>

<style scoped lang="less">
.title{
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  margin: 10px 0 20px 0;
  border-left: 4px solid #047cca;
  font-size: 20px;
  font-family: "微软雅黑";
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>
